<!-- subpkg_consult/payment/payment.vue -->
<script lang="ts" setup>
	import { ref } from 'vue'
	import { preOrderApi, createOrderApi, orderPayApi } from '@/apis/consult'
	import { useConsultStore } from '@/stores/consult'
	import type { OrderPreData } from '@/types/consult.d.ts'
	import type { PatientItem } from '@/types/patient.d.ts'
	import { patientDetailApi } from '@/apis/patient'

	// 	仓库数据
	const store = useConsultStore()
	// 订单信息
	const info = ref({} as OrderPreData)
	const createPreOrder = async () => {
		const res = await preOrderApi({
			illnessType: store.illnessType,
			type: store.type,
			useCoupon: '0',
		})
		// console.log(res)
		info.value = res
	}
	createPreOrder()

	// 患者信息
	const patientInfo = ref({} as PatientItem)
	const getPatient = async () => {
		const res = await patientDetailApi(store.patientId)
		// console.log(res)
		patientInfo.value = res
	}
	getPatient()

	// 渲染患者信息
	const renderPatientInfo = () => {
		return (
			patientInfo.value.name +
			' | ' +
			patientInfo.value.genderValue +
			' | ' +
			patientInfo.value.age
		)
	}

	const paypop = ref()

	const orderId = ref('')

	// 创建待支付订单
	const createOrder = async () => {
		const res = await createOrderApi({
			illnessDesc: store.illnessInfo.illnessDesc,
			pictures: store.illnessInfo.pictures,
			consultFlag: store.illnessInfo.consultFlag,
			illnessTime: store.illnessInfo.illnessTime,

			illnessType: store.illnessType,
			type: store.type,
			patientId: store.patientId,
			depId: store.depId,
		})
		// 获取待支付订单的 id
		// console.log(res.id)
		orderId.value = res.id
		// 清空 问诊的数据（本地挨个清除，store 中抽取一个方法，直接调用）
		store.clear()
		// 弹框
		paypop.value.open()
	}

	// 点击 x
	const closeFunc = () => {
		uni.showModal({
			title: '提示',
			content: '现在取消可能一会没医生咯，你确定',
			showCancel: true,
			cancelText: '再看看',
			confirmText: '就是要走',
			success: (confirm) => {
				if (confirm.confirm === true) {
					// 跳转到 下一个页面（无历史记录）
					uni.reLaunch({
						// 开头没有/ 会当做相对路径进行拼接
						url: '/subpkg_consult/room/room',
					})
					// console.log('点了 x')
					// 通过子组件传递 close 事件的方式
					// 父组件中，捕获到点击 x，除了关闭弹框之外还可以 添加自定义的逻辑。更加灵活
					paypop.value.close()
				}
			},
		})
	}

	// 点击立即支付
	const confirmFunc = (payType: number) => {
		console.log('点了立即支付', payType)
		if (payType === 0) {
			// TODO 支付宝支付
			aliPay()
		} else if (payType === 1) {
			uni.showToast({
				title: '暂不支持微信支付',
			})
		}
	}

	const aliPay = async () => {
		const res = await orderPayApi({
			orderId: orderId.value,
			payCallback: 'http://localhost:5173/#/subpkg_consult/room/room',
			paymentMethod: '1',
		})
		// console.log(res)
		const { payUrl } = res
		// 跳转到返回的地址，实现支付 因为是 web 支付，直接跳转即可
		// 这段代码是 用 js 控制页面跳转的逻辑
		window.location.href = payUrl
	}
</script>

<template>
	<scroll-page>
		<view class="payment-page">
			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				:title="`图文问诊${info.payment || '0'}元`"
			>
				<uni-list :border="false">
					<uni-list-item
						title="极速问诊"
						note="自动分配医生"
						thumb="/static/uploads/doctor-avatar.jpg"
						thumb-size="lg"
					/>
					<uni-list-item
						title="优惠券"
						show-arrow
						:right-text="`-¥${info.pointDeduction || 0}`"
					/>
					<uni-list-item title="积分抵扣">
						<template #footer>
							<view class="uni-list-text-red">-¥{{ info.couponDeduction }}</view>
						</template>
					</uni-list-item>
					<uni-list-item title="实付款">
						<template #footer>
							<view class="uni-list-text-red">¥{{ info.actualPayment }}</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>

			<view class="dividing-line"></view>

			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				title="患者资料"
			>
				<uni-list :border="false">
					<uni-list-item title="患者信息">
						<template #footer>
							<view class="uni-list-text-gray"> {{ renderPatientInfo() }} </view>
						</template>
					</uni-list-item>
					<uni-list-item border title="病情描述" :note="store.illnessInfo.illnessDesc" />
				</uni-list>
			</uni-section>

			<!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
		</view>
		<!-- 下一步操作 -->
		<view class="next-step">
			<view class="total-amount">
				合计: <text class="number">¥{{ info.actualPayment }}</text>
			</view>
			<button @tap="createOrder" class="uni-button">立即支付</button>
		</view>
	</scroll-page>
	<custom-payment
		@close="closeFunc"
		:amount="info.actualPayment"
		:orderId="orderId"
		ref="paypop"
		@confirm="confirmFunc"
	></custom-payment>
</template>

<style lang="scss">
	@import './index.scss';
</style>
